<template>
  <div class="page">
    <div class="main">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>
            <navigation />
          </span>
          <el-button @click="goBack" type="primary" size="small"
            >返回</el-button
          >
        </div>
        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="handleClick"
          :before-leave="Tabever"
        >
          <el-tab-pane label="市级" name="first">
            <el-table
              border
              :data="tableData"
              style="width: 100%"
              height="700px"
              size="small"
              :header-cell-style="{ background: '#f5f5f5' }"
            >
              <el-table-column
                align="center"
                width="80"
                prop="departmentTypeName"
                label="单位类别"
              ></el-table-column>
              <el-table-column
                align="center"
                width="160"
                prop="departmentName"
                label="单位名称"
              ></el-table-column>
              <el-table-column
                align="center"
                width="60"
                prop="caveat"
                label="预警亮灯"
              >
                <template slot-scope="scope">
                  <span class="lightSty">
                    <img
                      v-if="scope.row.imgUrl != null"
                      :src="scope.row.imgUrl"
                    />
                  </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="一季度">
                <el-table-column
                  align="center"
                  width="45"
                  prop="score1"
                  label="分数"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="45"
                  prop="rank1"
                  label="排名"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="rankDescription1"
                  label="描述"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="60"
                  prop="status1"
                  label="状态"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.status1 == 1
                        ? "待审核"
                        : scope.row.status1 == 2
                        ? "审核通过"
                        : scope.row.status1 == -1
                        ? "驳回"
                        : "未审核"
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="二季度">
                <el-table-column
                  align="center"
                  width="45"
                  prop="score2"
                  label="分数"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="45"
                  prop="rank2"
                  label="排名"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="rankDescription2"
                  label="描述"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="60"
                  prop="status2"
                  label="状态"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.status2 == 1
                        ? "待审核"
                        : scope.row.status2 == 2
                        ? "审核通过"
                        : scope.row.status2 == -1
                        ? "驳回"
                        : "未审核"
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="三季度">
                <el-table-column
                  align="center"
                  width="45"
                  prop="score3"
                  label="分数"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="45"
                  prop="rank3"
                  label="排名"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="rankDescription3"
                  label="描述"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="60"
                  prop="status3"
                  label="状态"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.status3 == 1
                        ? "待审核"
                        : scope.row.status3 == 2
                        ? "审核通过"
                        : scope.row.status3 == -1
                        ? "驳回"
                        : "未审核"
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="全年">
                <el-table-column
                  align="center"
                  width="45"
                  prop="score4"
                  label="分数"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="45"
                  prop="rank4"
                  label="排名"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="rankDescription4"
                  label="描述"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="60"
                  prop="status4"
                  label="状态"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.status4 == 1
                        ? "待审核"
                        : scope.row.status4 == 2
                        ? "审核通过"
                        : scope.row.status4 == -1
                        ? "驳回"
                        : "未审核"
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="区县" name="second">
            <el-table
              border
              :data="tableData"
              style="width: 100%"
              height="700px"
              size="small"
              :header-cell-style="{ background: '#f5f5f5' }"
            >
              <el-table-column
                align="center"
                width="80"
                prop="departmentTypeName"
                label="单位类别"
              ></el-table-column>
              <el-table-column
                align="center"
                width="160"
                prop="departmentName"
                label="单位名称"
              ></el-table-column>
              <el-table-column
                align="center"
                width="60"
                prop="caveat"
                label="预警亮灯"
              >
                <template slot-scope="scope">
                  <span class="lightSty">
                     <img
                      v-if="scope.row.imgUrl != null"
                      :src="scope.row.imgUrl"
                    />
                  </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="一季度">
                <el-table-column
                  align="center"
                  width="45"
                  prop="score1"
                  label="分数"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="45"
                  prop="rank1"
                  label="排名"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="rankDescription1"
                  label="描述"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="60"
                  prop="status1"
                  label="状态"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.status1 == 1
                        ? "待审核"
                        : scope.row.status1 == 2
                        ? "审核通过"
                        : scope.row.status1 == -1
                        ? "驳回"
                        : "未审核"
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="二季度">
                <el-table-column
                  align="center"
                  width="45"
                  prop="score2"
                  label="分数"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="45"
                  prop="rank2"
                  label="排名"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="rankDescription2"
                  label="描述"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="60"
                  prop="status2"
                  label="状态"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.status2 == 1
                        ? "待审核"
                        : scope.row.status2 == 2
                        ? "审核通过"
                        : scope.row.status2 == -1
                        ? "驳回"
                        : "未审核"
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="三季度">
                <el-table-column
                  align="center"
                  width="45"
                  prop="score3"
                  label="分数"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="45"
                  prop="rank3"
                  label="排名"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="rankDescription3"
                  label="描述"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="60"
                  prop="status3"
                  label="状态"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.status3 == 1
                        ? "待审核"
                        : scope.row.status3 == 2
                        ? "审核通过"
                        : scope.row.status3 == -1
                        ? "驳回"
                        : "未审核"
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="全年">
                <el-table-column
                  align="center"
                  width="45"
                  prop="score4"
                  label="分数"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="45"
                  prop="rank4"
                  label="排名"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="rankDescription4"
                  label="描述"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="60"
                  prop="status4"
                  label="状态"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.status4 == 1
                        ? "待审核"
                        : scope.row.status4 == 2
                        ? "审核通过"
                        : scope.row.status4 == -1
                        ? "驳回"
                        : "未审核"
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <!-- <el-table-column align="center" label="操作" width="290">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="dataGrade(scope.row)">通过</el-button>
                  <el-button type="danger" size="mini" @click="regect(scope.row)">驳回</el-button>
                  <el-button
                    type="warning"
                    size="mini"
                    @click="brLight(scope.row)"
                    :disabled="scope.row.caveat==2"
                  >预警亮灯</el-button>
                  <el-button
                    type="success"
                    size="mini"
                    @click="closeLight(scope.row)"
                    :disabled="scope.row.caveat==0"
                  >灭灯</el-button>
                </template>
              </el-table-column> -->
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="开发区" name="third">
            <el-table
              border
              :data="tableData"
              style="width: 100%"
              height="700px"
              size="small"
              :header-cell-style="{ background: '#f5f5f5' }"
            >
              <el-table-column
                align="center"
                width="80"
                prop="departmentTypeName"
                label="单位类别"
              ></el-table-column>
              <el-table-column
                align="center"
                width="160"
                prop="departmentName"
                label="单位名称"
              ></el-table-column>
              <el-table-column
                align="center"
                width="60"
                prop="caveat"
                label="预警亮灯"
              >
                <template slot-scope="scope">
                  <span class="lightSty">
                     <img
                      v-if="scope.row.imgUrl != null"
                      :src="scope.row.imgUrl"
                    />
                  </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="一季度">
                <el-table-column
                  align="center"
                  width="45"
                  prop="score1"
                  label="分数"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="45"
                  prop="rank1"
                  label="排名"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="rankDescription1"
                  label="描述"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="60"
                  prop="status1"
                  label="状态"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.status1 == 1
                        ? "待审核"
                        : scope.row.status1 == 2
                        ? "审核通过"
                        : scope.row.status1 == -1
                        ? "驳回"
                        : "未审核"
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="二季度">
                <el-table-column
                  align="center"
                  width="45"
                  prop="score2"
                  label="分数"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="45"
                  prop="rank2"
                  label="排名"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="rankDescription2"
                  label="描述"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="60"
                  prop="status2"
                  label="状态"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.status2 == 1
                        ? "待审核"
                        : scope.row.status2 == 2
                        ? "审核通过"
                        : scope.row.status2 == -1
                        ? "驳回"
                        : "未审核"
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="三季度">
                <el-table-column
                  align="center"
                  width="45"
                  prop="score3"
                  label="分数"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="45"
                  prop="rank3"
                  label="排名"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="rankDescription3"
                  label="描述"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="60"
                  prop="status3"
                  label="状态"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.status3 == 1
                        ? "待审核"
                        : scope.row.status3 == 2
                        ? "审核通过"
                        : scope.row.status3 == -1
                        ? "驳回"
                        : "未审核"
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="全年">
                <el-table-column
                  align="center"
                  width="45"
                  prop="score4"
                  label="分数"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="45"
                  prop="rank4"
                  label="排名"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="rankDescription4"
                  label="描述"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="60"
                  prop="status4"
                  label="状态"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.status4 == 1
                        ? "待审核"
                        : scope.row.status4 == 2
                        ? "审核通过"
                        : scope.row.status4 == -1
                        ? "驳回"
                        : "未审核"
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <!-- <el-table-column align="center" label="操作" width="290">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="dataGrade(scope.row)">通过</el-button>
                  <el-button type="danger" size="mini" @click="regect(scope.row)">驳回</el-button>
                  <el-button
                    type="warning"
                    size="mini"
                    @click="brLight(scope.row)"
                    :disabled="scope.row.caveat==2"
                  >预警亮灯</el-button>
                  <el-button
                    type="success"
                    size="mini"
                    @click="closeLight(scope.row)"
                    :disabled="scope.row.caveat==0"
                  >灭灯</el-button>
                </template>
              </el-table-column> -->
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="西咸新区" name="fourth">
            <el-table
              border
              :data="tableData"
              style="width: 100%"
              height="700px"
              size="small"
              :header-cell-style="{ background: '#f5f5f5' }"
            >
              <el-table-column
                align="center"
                width="80"
                prop="departmentTypeName"
                label="单位类别"
              ></el-table-column>
              <el-table-column
                align="center"
                width="160"
                prop="departmentName"
                label="单位名称"
              ></el-table-column>
              <el-table-column
                align="center"
                width="60"
                prop="caveat"
                label="预警亮灯"
              >
                <template slot-scope="scope">
                  <span class="lightSty">
                      <img
                      v-if="scope.row.imgUrl != null"
                      :src="scope.row.imgUrl"
                    />
                  </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="一季度">
                <el-table-column
                  align="center"
                  width="45"
                  prop="score1"
                  label="分数"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="45"
                  prop="rank1"
                  label="排名"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="rankDescription1"
                  label="描述"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="60"
                  prop="status1"
                  label="状态"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.status1 == 1
                        ? "待审核"
                        : scope.row.status1 == 2
                        ? "审核通过"
                        : scope.row.status1 == -1
                        ? "驳回"
                        : "未审核"
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="二季度">
                <el-table-column
                  align="center"
                  width="45"
                  prop="score2"
                  label="分数"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="45"
                  prop="rank2"
                  label="排名"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="rankDescription2"
                  label="描述"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="60"
                  prop="status2"
                  label="状态"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.status2 == 1
                        ? "待审核"
                        : scope.row.status2 == 2
                        ? "审核通过"
                        : scope.row.status2 == -1
                        ? "驳回"
                        : "未审核"
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="三季度">
                <el-table-column
                  align="center"
                  width="45"
                  prop="score3"
                  label="分数"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="45"
                  prop="rank3"
                  label="排名"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="rankDescription3"
                  label="描述"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="60"
                  prop="status3"
                  label="状态"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.status3 == 1
                        ? "待审核"
                        : scope.row.status3 == 2
                        ? "审核通过"
                        : scope.row.status3 == -1
                        ? "驳回"
                        : "未审核"
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column align="center" label="全年">
                <el-table-column
                  align="center"
                  width="45"
                  prop="score4"
                  label="分数"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="45"
                  prop="rank4"
                  label="排名"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="rankDescription4"
                  label="描述"
                ></el-table-column>
                <el-table-column
                  align="center"
                  width="60"
                  prop="status4"
                  label="状态"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.status4 == 1
                        ? "待审核"
                        : scope.row.status4 == 2
                        ? "审核通过"
                        : scope.row.status4 == -1
                        ? "驳回"
                        : "未审核"
                    }}
                  </template>
                </el-table-column>
              </el-table-column>
              <!-- <el-table-column align="center" label="操作" width="290">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="dataGrade(scope.row)">通过</el-button>
                  <el-button type="danger" size="mini" @click="regect(scope.row)">驳回</el-button>
                  <el-button
                    type="warning"
                    size="mini"
                    @click="brLight(scope.row)"
                    :disabled="scope.row.caveat==2"
                  >预警亮灯</el-button>
                  <el-button
                    type="success"
                    size="mini"
                    @click="closeLight(scope.row)"
                    :disabled="scope.row.caveat==0"
                  >灭灯</el-button>
                </template>
              </el-table-column> -->
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      targetId: this.$route.query.id,
      tableData: [],
      typeLight: "",
      showAddFormdialog: false,
      taskForm: {
        departmentId: "",
        type: 2,
        quarter: "",
        id: "",
        status: "",
        regectMsg: ""
      },
      quarterList: [
        { id: 1, name: "第一季度" },
        { id: 2, name: "第二季度" },
        { id: 3, name: "第三季度" },
        { id: 4, name: "第四季度" }
      ],
      btnStatus: true,
      activeName: "first",
      subtasksId :'',
      taskId:'' 
    };
  },
  mounted() {
    this.subtasksId = this.$route.query.id;
    this.taskId = this.$route.query.taskId;
    this.getListByPage(1);
  },
  methods: {
    Tabever(activeName, oldActiveName) {
      // console.log(activeName)
      if (activeName == "first") {
        this.getListByPage(1);
      } else if (activeName == "second") {
        this.getListByPage(2);
      } else if (activeName == "third") {
        this.getListByPage(3);
      } else if (activeName == "fourth") {
        this.getListByPage(4);
      }
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    goBack() {
      this.$router.go(-1);
    },
    // 获取数据列表
    getListByPage(data) {
      this.$axios
        .post("deptScore/getListDepartmentSocre", {
          id: this.subtasksId,
          departmentTypeId:data,
          taskId : this.taskId
        },2)
        .then(res => {
          if (res.code == 200) {
            for (let i = 0; i < res.data.length; i++) {
              res.data[i]["imgUrl"] == null;
              if (res.data[i].lamp == 1) {
                res.data[i].imgUrl = require("../../assets/img/redFlag.png");
              } else if (res.data[i].lamp == 0) {
                res.data[
                  i
                ].imgUrl = require("../../assets/img/yellowLight.png");
              }
            }
            this.tableData = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 审核
    dataGrade(row) {
      this.showAddFormdialog = true;
      this.taskForm.departmentId = row.departmentId;
      this.btnStatus = true;
    },
    regect(row) {
      this.showAddFormdialog = true;
      this.taskForm.departmentId = row.departmentId;
      this.btnStatus = false;
    },
    brLight(row) {
      if (row.caveat == 0) {
        this.typeLight = 1;
      } else if (row.caveat == 1) {
        this.typeLight = 2;
      }
      let obj = {
        id: row.departmentId,
        caveat: this.typeLight
      };
      this.$axios
        .post("dept/update", obj, 2)
        .then(res => {
          if (res.code == 200) {
            this.getListByPage();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    closeLight(row) {
      if (row.caveat == 2) {
        this.typeLight = 0;
      } else if (row.caveat == 1) {
        this.typeLight = 0;
      }
      let obj = {
        id: row.departmentId,
        caveat: this.typeLight
      };
      this.$axios
        .post("dept/update", obj, 2)
        .then(res => {
          if (res.code == 200) {
            this.getListByPage();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    quarterChange(val) {
      let obj = {
        departmentId: this.taskForm.departmentId,
        type: 2,
        time: this.taskForm.quarter
      };
      this.$axios
        .post("deptScore/load", obj, 2)
        .then(res => {
          if (res.code == 200) {
            if (res.data) {
              this.taskForm.id = res.data.departmentId;
              this.taskForm.status = res.data.status;
            } else {
              this.taskForm.id = "";
              this.taskForm.status = "";
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    submitForm() {
      if (this.taskForm.id) {
        let obj = {
          departmentId: this.taskForm.id,
          quarter: this.taskForm.quarter
        };
        if (this.btnStatus) {
          if (this.taskForm.status == 1) {
            obj.status = 1;
            this.getStatus(obj);
          } else if (this.taskForm.status == 2) {
            this.$message({
              message: "审核通过状态不能再通过",
              type: "success"
            });
          } else {
            this.$message({
              message: "此状态不能再通过",
              type: "success"
            });
          }
        } else {
          if (this.taskForm.status == 2) {
            obj.status = -1;
            obj.message = this.taskForm.regectMsg;
            this.getStatus(obj);
          } else if (this.taskForm.status == -1) {
            this.$message({
              message: "驳回状态,不能驳回",
              type: "success"
            });
          } else {
            this.$message({
              message: "此状态,不能驳回",
              type: "success"
            });
          }
        }
      } else {
        this.$message({
          message: "请先给该季度打分然后再申请审核!",
          type: "warning"
        });
      }
      setTimeout(() => {
        this.showAddFormdialog = false;
      }, 500);
    },
    getStatus(obj) {
      this.$axios
        .post("departmentScoreCheckLog/update", obj, 2)
        .then(res => {
          if (res.code == 200) {
            if (res.data) {
              if (this.btnStatus) {
                this.$message({
                  message: "审核通过",
                  type: "success"
                });
              } else {
                this.$message({
                  message: "驳回",
                  type: "success"
                });
              }
              this.getListByPage();
              this.showAddFormdialog = false;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    cancelForm() {
      this.taskForm = {
        departmentId: "",
        type: 2,
        quarter: "",
        id: "",
        status: "",
        regectMsg: ""
      };
    }
  }
};
</script>
<style scoped>
.page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main {
  width: 100%;
  height: 100%;
}
.clearfix {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.lightSty {
  display: block;
  width: 25px;
  height: 25px;
  margin-left: 5px;
}
.lightSty img {
  width: 100%;
  height: 100%;
}
.userIntSize {
  width: 80%;
}
</style>
